.md-text .tag-plugin.quot
  text-align: center
  align-items: center
  display: flex
  flex-direction: column
  --gap-p: 2rem
  margin: var(--gap-p) 1rem
  .content
    display: flex
    align-items: center
    border-bottom: none
    font-weight: 700
    padding: 0 24px
    @media screen and (max-width: $device-mobile)
      padding: 0 20px
    line-height: 1.2

.md-text .tag-plugin.quot .content
  position: relative
// override
.md-text.content .tag-plugin.quot
  h1,h2
    font-size: $fsh2
    font-weight: 900
    padding: 4px 32px 0
    @media screen and (max-width: $device-mobile)
      padding: 4px 24px 0
  h3,h4,h5,h6
    font-size: $fsh3
  p
    font-size: calc(var(--fsp) + 2px)
    color: var(--text)

// type=text
.md-text .tag-plugin.quot
  .content[type=text]
    &:before,&:after
      content: ""
      position: absolute
      width: 8px
      height: 14px
    &:before
      top: -8px
      left: 0
      border-top: 6px solid $color-accent
      border-left: 6px solid $color-accent
    &:after
      right: 0
      bottom: -8px
      border-right: 6px solid $color-accent
      border-bottom: 6px solid $color-accent
  h1.content[type=text]
    &:before,&:after
      width: 12px
      height: 20px
      border-width: 8px

// type=icon
.md-text .tag-plugin.quot .content[type=icon]
  img,svg
    height: 1.5em
    display: inline-block
    color: $color-accent
    border-radius: 0
    flex-shrink: 0
  span.text
    margin: 0 .5rem
    padding-top: 1px
  span.empty
    padding: 0 8px
  
